<template>
    <div class="t-input-box">
        <div v-for="(item, index) in arrTset" :key="index" class="t-input">
            <input v-model="arrTset[index]" v-on:blur="handleBlur(index)" />
            <div class="circle" @click="deleteItem(index)">X</div>
        </div>
        <div class="t-input-add" @click="addInput" v-show="arrTset.length < 10">+</div>
    </div>
</template>
  
<script>
export default {
    name: 'TInput',
    props: {
        arr: {
            type: Array,
            default: function () {
                return [];
            }
        }
    },
    created() {
        this.arrTset = this.arr
    },
    data() {
        return {
            arrTset: [],
            visible: false,
        };
    },
    watch: {
        arr(newArr) {
            // 当 arr 变化时，更新 arrTset
            this.arrTset = [...newArr];
        }
    },
    methods: {
        addInput() {
            // this.arrTset = this.arrTset.filter(item => item != null && item != '');
            // this.arrTset.push('');
            this.$emit("getArr", this.arrTset);
        },
        deleteItem(index) {
            // this.arrTset[index] = null
            // // this.arrTset.splice(index, 1);
            // console.log(index);
            this.$set(this.arrTset, index, 0);
            this.$emit("getArr", this.arrTset);
        },
        handleBlur(index) {
            // this.arrTset = this.arrTset.filter(item => item != null && item != '');
            this.$set(this.arrTset, index, 0);
            this.$emit("getArr", this.arrTset);
        }
    }
};
</script>
  
<style rel="stylesheet/scss" lang="scss" scoped>
.t-input-box {
    width: 100%;
    min-height: 80px;
    border-radius: 25px;
    background: #394760;
    display: flex;
    flex-wrap: wrap;
    color: #FFFFFF;

    .t-input {
        display: flex;
        background: #2B526F;
        border-radius: 25px;
        height: 30px;
        width: 90px;
        margin: 8px;
        align-items: center;
    }

    .circle {
        width: 18px;
        height: 18px;
        background: #FBD580;
        opacity: 1;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        color: #2B526F;
        cursor: pointer;
    }

    .circle:hover {
        color: #FFFFFF;
    }

    input {
        color: #FFFFFF;
        width: 60px;
        border: none;
        outline: none;
        background: none;
        padding-left: 10px;
    }

    .t-input-add {
        color: #FFFFFF;
        display: flex;
        background: #2CA6E0;
        border-radius: 25px;
        height: 30px;
        width: 90px;
        margin: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 25px;
        cursor: pointer;
    }
}
</style>
  